<template>

    <el-card class="card-css custom-card" shadow="always">
      <h1>个人信息</h1>
      <div style="display: flex; flex-wrap: nowrap;">
        <el-card class="avatar-headImg custom-card" shadow="always">

          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="{authorization:token}"
              style="margin-top: 28px"

          >
            <img v-if="imageUrl" :src="baseUrl+imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>


        </el-card>
        <el-card  class="input-info custom-card" shadow="always">
          <el-form  :rules="rules" ref="formRef"   :model="userForm" >

            <el-form-item prop="oldPassword" label="旧密码">
              <el-input autocomplete="off" v-model="userForm.oldPassword" type="password" placeholder="旧密码"></el-input>
            </el-form-item>

            <el-form-item prop="newPassword" label="新密码">
              <el-input autocomplete="off" v-model="userForm.newPassword" type="password" placeholder="新密码"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="手机号">
              <el-input v-model="userForm.phone" type="text" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱&nbsp;&nbsp;&nbsp;">
              <el-input v-model="userForm.email"   placeholder="邮箱"></el-input>
            </el-form-item>

          </el-form>
        </el-card>

      </div>

      <el-card shadow="always" class="custom-card" >
        <el-button type="info" @click="clearUserInfo">清空</el-button>
        <el-button type="primary" @click="saveUserInfo">保存</el-button>
      </el-card>
    </el-card>


</template>

<script setup>


import {ref, onMounted, inject, computed} from "vue";
import {ElMessage} from "element-plus"
import {Plus} from "@element-plus/icons-vue"
import {useStore} from "vuex";
import axios from "@/axios.js"

const baseUrl = '../../public/img/'

const store = useStore()

const formRef = ref(null)

// 计算属性
const token = computed(() => localStorage.getItem("token"))

const rules = ref( {
  email: [{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }],
  phone: [{ type: 'phone', message: '手机不正确', trigger: 'blur' }]
})

const userForm = ref({
   name: "",
   oldPassword:"",
   newPassword: "",
   phone:"",
   email:"",
   headImg:""
})


const clearUserInfo = ()=>{
  Object.keys(userForm.value).forEach(key => {
    userForm.value[key] = ""
  })
}




const getUserInfo = ()=>{
  axios.get("/user/getUserInfo").then(res=>{
      userForm.value = res.data
      imageUrl.value = res.data.headImg
  })

}

const saveUserInfo = ()=>{
   formRef.value.validate(async (valid)=>{

        if (valid){
            axios.post("/user/saveUserInfo",userForm.value).then(res=>{
              if (res.code == 200){
                ElMessage.success(res.msg)
                getUserInfo()
              }

            })
        }else {
          ElMessage.error("校验失败")
        }
   })
}


onMounted(()=>{
    getUserInfo()
})



const imageUrl = ref('');

const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = response.data
  userForm.value.headImg = imageUrl.value
};

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!');
    return false;
  }
  return true;
};

</script>

<style scoped>
.card-css{
  text-align: center;
  width: 800px;
  margin-left: 220px;
  margin-top: 70px;
}
.avatar-headImg{
    margin: 20px;
    width: 350px;


}

.input-info{
    margin: 20px;
}

.custom-card {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5),
  0 0 4px rgba(0, 0, 0, 0.3),
  0 0 4px rgba(0, 0, 0, 0.1);
}





.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: inline-block;
}


</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
